/**********************************************************************************

	Project Name: Katemi - Clean Responsive Product, Service and App Landing Page
	Description : Responsive Stylesheet for Katemi Landing Page
	Author: Works of Wisnu
	Author URI: http://worksofwisnu.com
	Version: 1.0.0
	
**********************************************************************************/
/* Large desktop */
@media (min-width: 1200px) {
	/* General 
	--------------------*/
	span.rollover{
		width: 510px;
	}
	
	/* Head Banner 
	--------------------*/
	/* Product Teaser */
	.product-teaser span.play-button{
		width: 570px;
		height: 320px;
	}
	
	.product-teaser .right-desc {
		margin-top: 120px;
	}
	
	/* App Teaser */
	.flexslider-app-teaser{
		margin-left: 35px;	
	}
	
	.app-teaser .left-desc .top-left-desc:after{
		background-position-x: 225px;
	}
	
	.app-teaser .left-desc .btm-left-desc:before{
		background-position-x: 225px;
	}
	
	.app-teaser .right-desc .top-right-desc:after{
		background-position-x: 85px;
	}
	
	.app-teaser .right-desc .btm-right-desc:before{
		background-position-x: 85px;
	}
	
	/* Content
	--------------------*/
	.section-subtitle {
		width: 55%;
	}
	
	/* #Featurettes 
	--------------------*/
	.featurettes-inner-section img {
		margin: 20px 0 0px;
	}
	
	.featurettes-inner-section .checklist li {
		margin-bottom: 1.3em;
		font-size: 14px;
		line-height: 21px;
	}
	
	/* #Annotations
	--------------------*/
	/*product dot*/
	.product-dot1{
		margin-left: 160px;
		margin-top: 140px;
	}
	.product-dot2{
		margin-left: 640px;
		margin-top: 185px;
	}
	
	.product-dot3{
		margin-left: 1015px;
		margin-top: 100px;
	}
	
	.product-dot4{
		margin-left: 255px;
		margin-top: 235px;
	}
	
	.product-dot5{
		margin-left: 923px;
		margin-top: 321px;
	}
	
	.product-dot6{
		margin-left: 785px;
		margin-top: 510px;
	}
	
	.product-dot7{
		margin-left: 190px;
		margin-top: 440px;
	}
	
	.product-dot8{
		margin-left: 585px;
		margin-top: 753px;
	}
	
	ul.annotations-features li {
		margin-bottom: 35px;
	}
	
	/*app dot*/
	.app-dot1{
		margin-left: 115px;
	}
	
	.app-dot2{
		margin-left: 185px;
	}
	
	.app-dot3{
		margin-left: 130px;
	}
	
	.app-dot4{
		margin-left: 300px;
	}
	
	.app-dot5{
		margin-left: 95px;
	}
	
	/* Pricing Table */
	.pricing-table.popular:before{
		margin-left: 58px;
	}

	/* #Breakline
	--------------------*/
	#breakline h3:after{
		margin-top: 0;
		margin-left: 75px;	
	}
	
	#subscribe_form input[type="text"]{
		width: 68.3%;
	}
	
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	/* General */
	span.rollover{
		width: 308px;	
	}
	
	/* #Top Nav 
	--------------------*/
	#top-nav{
		padding: 0;
		
	}
	
	.navbar .brand{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.navbar .nav-collapse .nav.pull-right{
		margin-bottom: 0;
	}
	
	.navbar-inverse .btn-navbar{
		margin-top: 12px;
		background: #272b31;
	}
	
	.navbar-inverse .btn-navbar:hover{
		background: #2e9a66;
	}
	
	.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus{
		box-shadow: none;
	}
	
	.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a{
		border-radius: 0;
		border-bottom: 1px dashed #999;
		padding: 15px;
	}
	
	.navbar-inverse .nav-collapse .nav > li:last-child > a {
		border: none;
	}
	
	.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover{
		background: none;
	}
	
	/* #Head Banner
	---------------------*/
	#head-banner{
		margin-top: -21px;
	}
	
	/*Produt Teaser */
	.product-teaser span.play-button{
		width: 352px;
		height: 264px;
	}
	
	.product-teaser .left-desc{
		margin: 0;
	}
	
	.product-teaser .right-desc{
		margin: 0;
		margin-left: 2.7624309392265194%;
	}
	
	.product-teaser .left-desc p, .product-teaser .right-desc p{
		font-size: 12px;
	}
	
	.product-teaser .left-desc:after{
		margin-top: 0;
	}
	
	.product-teaser .right-desc:before{
		margin-bottom: 10px;
		margin-top: 20px;
	}
	
	.flexslider-low-head-banner .slides{
		min-height: 104px;
	}
	
	/*App Teaser */
	.app-teaser .left-desc .top-left-desc, .app-teaser .right-desc .top-right-desc, .app-teaser .left-desc .btm-left-desc, .app-teaser .right-desc .btm-right-desc {
		margin-top: 27px;
	}
	
	.app-teaser .left-desc .top-left-desc p, .app-teaser .right-desc .top-right-desc p, .app-teaser .left-desc .btm-left-desc p, .app-teaser .right-desc .btm-right-desc p{
		font-size: 12px;
	}
	
	.app-teaser .left-desc .top-left-desc:after, .app-teaser .left-desc .btm-left-desc:before{
		background-position-x: 120px;
	}
	
	.app-teaser .right-desc .top-right-desc:after, .app-teaser .right-desc .btm-right-desc:before{
		background-position-x: 20px;
	}
	
	/* #Featurettes
	----------------------*/
	.row-fluid.featurettes-inner-section [class*="span"]{
		width: 100%;
		margin-left: 0;
	}
	
	/* featurettes flexslider */
	.featurettes-inner-section img{
		margin: 0 auto;
	}
	
	/* #Annotations
	----------------------*/
	.annotation-link {
		width: 15px;
		height: 15px;
	}
	
	/* Product Dots */
	.product-dot1 {
		margin-left: 98px;
		margin-top: 88px;
	}
	
	.product-dot2 {
		margin-left: 395px;
		margin-top: 115px;
	}
	
	.product-dot3 {
		margin-left: 625px;
		margin-top: 65px;
	}
	
	.product-dot4 {
		margin-left: 155px;
		margin-top: 145px;
	}
	
	.product-dot5 {
		margin-left: 572px;
		margin-top: 200px;
	}
	
	.product-dot6 {
		margin-left: 485px;
		margin-top: 315px;
	}
	
	.product-dot7 {
		margin-left: 120px;
		margin-top: 270px;
	}
	
	.product-dot8 {
		margin-left: 363px;
		margin-top: 467px;
	}

	/*App Dots */
	.left-annotation, .right-annotation{
		margin-top: 0;	
	}
	
	.app-dot1 {
		margin-left: 62px;
		margin-top: 90px;
	}
	
	.app-dot2 {
		margin-left: 120px;
		margin-top: 165px;
	}
	
	.app-dot3 {
		margin-left: 75px;
		margin-top: 270px;
	}
	
	.app-dot4 {
		margin-left: 210px;
		margin-top: 325px;
	}
	
	.app-dot5 {
		margin-left: 50px;
		margin-top: 385px;
	}
	
	ul.annotations-features{
		text-align: center;
		margin: 0;
	}
	
	.annotations-features-icon{
		float: none;
		margin: 0;
	}
	
	.annotations-features-icon img{
		margin: 0 auto;
		display: block;
	}
	
	/* Toggle FAQ */
	a.toggle-button:before{
		display: none;
	}
	
	/* Pricing Table */
	.pricing-table.popular:before{
		margin-left: 6px;
	}
	
	/* #Breakline
	--------------------*/
	#subscribe_form input[type="text"]{
		width: 88%;
		margin-bottom: 10px;
	}
	
	.subscribe-submit{
		width: 100% !important;
	}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape iphone5 and down */
@media (max-width: 568px) {
	/* General */
	h1 {
	  font-size: 38.5px;
	}
	
	h2 {
	  font-size: 31.5px;
	}
	
	h3 {
	  font-size: 24.5px;
	}
	
	h4 {
	  font-size: 17.5px;
	}
	
	h5 {
	  font-size: 15.5px;
	}
	
	h6 {
	  font-size: 11.9px;
	}

	section{
		padding: 20px;
	}
	
	hr.content-hr{
		width: 90%;
		margin: 0 auto;
	}
	
	.checklist{
		text-align: left !important;
	}
	
	span.rollover{
		width: 528px;
	}
	
	/* #Top Nav 
	--------------------*/
	#top-nav{
		padding: 0 20px;
		
	}
	
	.navbar .brand{
		padding-bottom: 0;
		padding-top: 0;
	}
	
	.navbar .nav-collapse .nav.pull-right{
		margin-bottom: 0;
	}
	
	.navbar-inverse .btn-navbar{
		margin-top: 12px;
		background: #272b31;
	}
	
	.navbar-inverse .btn-navbar:hover{
		background: #2e9a66;
	}
	
	.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus{
		box-shadow: none;
	}
	
	.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a{
		border-radius: 0;
		border-bottom: 1px dashed #999;
		padding: 15px;
	}
	
	.navbar-inverse .nav-collapse .nav > li:last-child > a {
		border: none;
	}
	
	.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover{
		background: none;
	}
	
	/* #Head Banner
	---------------------*/
	#head-banner{
		margin-top: -21px;
		text-align: center;
	}
	
	.head-cta .span6{
		width: 47%;
		display: inline-block;
		margin-left: 20px;
	}
	
	/*Product Teaser */
	.product-teaser{
		margin-top: 0;
	}
	
	.product-teaser .left-desc:after, .product-teaser .right-desc:before{
		display: none;
	}
	
	.product-teaser .left-desc {
		margin-bottom: 20px;
	}
	
	.product-teaser .right-desc {
		margin-top: 20px;
	}
	
	.product-teaser span.play-button{
		width: 105px;
		margin-left: -50px;
		margin-top: 25px;
	}
	
	.flexslider-low-head-banner .slides{
		min-height: 236px;
	}
	
	.flexslider-low-head-banner .slides img {
		width: 30% !important;
		margin: 20px auto !important;
	}
	
	.testimonial{
		margin-top: 20px;
	}
	
	.testimonial:before{
		background-position: top center;
		left: auto;
	}
	
	.testimonial:after{
		background-position: top center;
		right: auto;
		margin-top: 20px;
	}
	
	.testi {
		padding-top: 40px;
	}
	
	.author{
		float: none;
	}
	
	/*App Teaser */
	
	hr.title-line{
		width: 80%;
	}
	
	.app-teaser .left-desc .top-left-desc:after, .app-teaser .left-desc .btm-left-desc:before, .app-teaser .right-desc .top-right-desc:after, .app-teaser .right-desc .btm-right-desc:before{
		display: none;
	}
	
	.flexslider-app-teaser{
		margin: 20px 0;
	}
	
	.app-teaser img.app-image {
		position: relative;
	}
	
	.app-teaser .left-desc .top-left-desc, .app-teaser .right-desc .top-right-desc, .app-teaser .left-desc .btm-left-desc, .app-teaser .right-desc .btm-right-desc{
		margin: 20px 0;
		display: inline-block;
	}
	
	/* #Marketing
	---------------------*/
	#marketing{
		text-align: center;	
		margin-top: 0 !important;
	}
	
	.marketing-content{
		margin-bottom: 20px;	
	}
	
	/* #Featurettes
	---------------------*/
	#featurettes{
		text-align: center;	
	}
	
	.featurettes-content{
		margin-bottom: 40px;
	}
	
	.featurettes-inner-section .span6{
		width: 50%;
		margin-left: 0;
		display: inline-block;
		float: left;
	}
	
	
	/* #Annotations
	---------------------*/
	#annotations{
		text-align: center;
	}
	
	.annotations-features-icon {
		float: none;
		margin-right: 0;
	}
	
	.right-annotation h6{
		margin-top: 0 !important;
	}
	
	.right-annotation .checklist{
		margin: 0 80px;
	}
	
	/* #Annotations
	----------------------*/
	.annotation-link {
		width: 15px;
		height: 15px;
	}
	
	/* Product Dots */
	.product-dot1 {
		margin-left: -190px;
		margin-top: 65px;
	}
	
	.product-dot2 {
		margin-left: 25px;
		margin-top: 85px;
	}
	
	.product-dot3 {
		margin-left: 190px;
		margin-top: 50px;
	}
	
	.product-dot4 {
		margin-left: -155px;
		margin-top: 105px;
	}
	
	.product-dot5 {
		margin-left: 145px;
		margin-top: 140px;
	}
	
	.product-dot6 {
		margin-left: 90px;
		margin-top: 235px;
	}
	
	.product-dot7 {
		margin-left: -180px;
		margin-top: 200px;
	}
	
	.product-dot8 {
		margin-left: -10px;
		margin-top: 330px;
	}

	/*App Dots */
	.app-dot1 {
		margin-left: -65px;
		margin-top: 120px;
	}
	
	.app-dot2 {
		margin-left: 5px;
		margin-top: 215px;
	}
	
	.app-dot3 {
		margin-left: -50px;
		margin-top: 355px
	}
	
	.app-dot4 {
		margin-left: 120px;
		margin-top: 425px;
	}
	
	.app-dot5 {
		margin-left: -80px;
		margin-top: 510px
	}
	
	/* #Lower Content
	---------------------*/
	#lower-content{
		text-align: center;	
	}
	
	/* Pricing Table */
	.pricing-table{
		width: 55%;
		margin: 20px auto;
	}
	
	.pricing-table.popular:before {
		margin-left: 67px;
	}
	
	/* Team */
	ul.team li {
		margin-bottom: 40px;
	}
	
	ul.team li img{
		float: none;
		margin-right: 0;
		margin-bottom: 0
	}
	
	/* Toggle Content */
	.toggle-content{
		text-align: left;
	}
	
	/* #Breakline
	---------------------*/
	#breakline h3{
		padding: 0;	
	}
	
	#breakline h3:after{
		display: none;
	}
	
	#subscribe_form input[type="text"]{
		width: 71.5%;
		margin-right: 5px;
	}
	
	.subscribe-text{
		margin-bottom: 20px;
	}
	
	/* #Footer
	---------------------*/
	#footer{
		text-align: center;
	}
	
	#footer .social{
		float: none;
	}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
	/* General */
	span.rollover{
		width: 440px;
	}	
	
	/* #Lower Content
	---------------------*/
	.pricing-table.popular::before {
		margin-left: 44px;
	}
	
	/* #Annotations
	---------------------*/	
	/* Product Dots */
	.product-dot1 {
		margin-left: -160px;
		margin-top: 50px;
	}
	
	.product-dot2 {
		margin-left: 18px;
		margin-top: 70px;
	}
	
	.product-dot3 {
		margin-left: 155px;
		margin-top: 40px;
	}
	
	.product-dot4 {
		margin-left: -135px;
		margin-top: 85px;
	}
	
	.product-dot5 {
		margin-left: 125px;
		margin-top: 115px;
	}
	
	.product-dot6 {
		margin-left: 70px;
		margin-top: 185px;
	}
	
	.product-dot7 {
		margin-left: -150px;
		margin-top: 160px;
	}
	
	.product-dot8 {
		margin-left: -10px;
		margin-top: 280px;
	}

	/*App Dots */
	.app-dot1 {
		margin-left: -65px;
		margin-top: 125px;
	}
	
	.app-dot2 {
		margin-left: 5px;
		margin-top: 212px;
	}
	
	.app-dot3 {
		margin-left: -50px;
		margin-top: 355px
	}
	
	.app-dot4 {
		margin-left: 120px;
		margin-top: 430px;
	}
	
	.app-dot5 {
		margin-left: -80px;
		margin-top: 510px;
	}
	
	/* #Breakline
	---------------------*/
	#subscribe_form {
		padding-left: 0;
		margin-top: 0;
	}
	
	#subscribe_form input[type="text"]{
		width: 92%;
		margin-bottom: 10px;
	}
	
	.subscribe-submit{
		width: 100% !important;
	}
}

/* Portrait phones and down */
@media (max-width: 320px) {
	/* General */
	span.rollover{
		width: 280px;
		height: 244px;
	}	
	
	/* #Head Banner
	---------------------*/
	.head-cta .span6{
		width: 100%;
		margin: 10px 0;
	}
	
	.head-cta .span6 a{
		float: none;
	}
	
	/* Product Teaser */
	.product-teaser span.play-button{
		margin-top: -50px;
	}
	
	.flexslider-low-head-banner .slides img{
		width: 60% !important;
		display: inline-block;
	}
	
	.testimonial {
		margin: 0;
		padding: 0;
	}
	
	.testimonial::before ,.testimonial::after{
		margin-left: -7px;
	}
	
	/* Content
	--------------------*/
	.section-subtitle {
		width: 100%;
		font-size: smaller;
	}
	
	/* Marketing */
	.marketing-content {
		margin-bottom: 40px;
	}
	
	/* #Featurettes
	----------------------*/
	.row-fluid.featurettes-inner-section [class*="span"]{
		width: 100%;
		margin-left: 0;
	}
	
	/* featurettes flexslider */
	.featurettes-inner-section img{
		margin: 0 auto;
	}
	
	.featurettes-inner-section .checklist {
		margin-top: 20px;
	}
	
	
	/* #Annotations
	---------------------*/
	.right-annotation .checklist{
		margin: 0 20px;
	}
	
	/* Product Dots */
	.product-dot1 {
		margin-left: -100px;
		margin-top: 30px;
	}
	
	.product-dot2 {
		margin-left: 10px;
		margin-top: 40px;
	}
	
	.product-dot3 {
		margin-left: 100px;
		margin-top: 20px;
	}
	
	.product-dot4 {
		margin-left: -80px;
		margin-top: 55px;
	}
	
	.product-dot5 {
		margin-left: 75px;
		margin-top: 70px;
	}
	
	.product-dot6 {
		margin-left: 45px;
		margin-top: 115px;
	}
	
	.product-dot7 {
		margin-left: -100px;
		margin-top: 100px;
	}
	
	.product-dot8 {
		margin-left: -10px;
		margin-top: 175px;
	}

	/*App Dots */
	.app-dot1 {
		margin-left: -62px;
		margin-top: 110px;
	}
	
	.app-dot2 {
		margin-left: 5px;
		margin-top: 195px;
	}
	
	.app-dot3 {
		margin-left: -50px;
		margin-top: 330px
	}
	
	.app-dot4 {
		margin-left: 110px;
		margin-top: 400px;
	}
	
	.app-dot5 {
		margin-left: -75px;
		margin-top: 475px;
	}
	
	/* #Lower Content
	--------------------*/
	/* Pricing Table */
	.pricing-table {
		width: 75%;
	}
	
	.pricing-table.popular::before {
		margin-left: 28px;
	}	
	
	/* Team */
	.team-name{
		font-size: 14px;
	}
	
	/* FAQ */
	a.toggle-button:before{
		display: none;
	}
	
	/* #Breakline
	--------------------*/
	#subscribe_form input[type="text"] {
		width: 88%;
	}

}